<template>
  <div>
    <!-- Banner Area Starts -->
    <section class="banner-area">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6 px-0">
            <div class="banner-bg"></div>
          </div>
          <div class="col-lg-6 align-self-center">
            <div class="banner-text">
              <h1>What we <span>do</span> ?</h1>
              <p class="py-3">
                我们实验室致力于开展多元化学习方向，无论你选择哪个方向学习，都有热心的学长学姐给你们提供帮助~~
              </p>
              <div class="secondary-btn">
                <a @click="toResult(0)">explore now<span class="flaticon-next"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="feature-area section-padding2" ref="wrap">
      <div class="container">
        <div class="row">
          <div class="col-lg-3">
            <div class="single-feature mb-4 mb-lg-0">
              <h4>嵌入式开发</h4>
              <p class="py-3">
                嵌入式开发就是指在嵌入式操作系统下进行开发，包括在系统化设计指导下的硬件和软件以及综合研发。除暂且分离硬件的EDA研发以外，侧重的就是在一定硬件条件下的系统化设计和软件研发。
              </p>
              <div class="secondary-btn">
                <a @click="toResult(1)">explore now<span class="flaticon-next"></span></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="single-feature">
              <h4>后端开发</h4>
              <p class="py-3">
                后端开发,也可以称为服务器端开发,是对用户看不到的程序后端部分的开发,负责处理前端的请求,进行逻辑处理和数据交互,会用到应用构建的服务器端语言、版本控制工具以及开发部署环境的Linux系统等工具。
              </p>
              <div class="secondary-btn">
                <a @click="toResult(2)">explore now<span class="flaticon-next"></span></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="single-feature">
              <h4>Web开发</h4>
              <p class="py-3">
                Web前端开发工程师，是从事Web前端开发工作的工程师。主要进行网站的开发、优化、完善的工作。网页制作是Web
                1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
              </p>
              <div class="secondary-btn">
                <a @click="toResult(3)">explore now<span class="flaticon-next"></span></a>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="single-feature mb-4 mb-lg-0">
              <h4>APP开发</h4>
              <p class="py-3">
                App开发，是指专注于手机应用软件开发与服务。
                App是application的缩写，通常专指手机上的应用软件，或称手机客户端。APP便捷了每个人的生活，APP开发让每个企业都开始了移动信息化进程。
              </p>
              <div class="secondary-btn">
                <a @click="toResult(4)">explore now<span class="flaticon-next"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Newsletter Area Starts -->
    <section class="newsletter-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>一个充满活力的实验室</h2>
              <p>A dynamic laboratory</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 嵌入式开发 -->
    <section class="employee-area section-padding" ref="qrs">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>实验室介绍</h2>
              <p>Introduce</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="single-slide d-sm-flex col-sm-12 col-xs-12">
              <!-- <div class="slide-img2 introduce"> -->
                <video controls>
                      <source :src="imgBaseUrl + '/introduce_2.mp4'" />
                    </video>
              <!-- </div> -->
              <div class="slide-text align-self-center">
                <i class="fa fa-quote-left"></i>
                <!-- <p>
                  "飞思卡尔"杯全国大学生智能车赛由高等学校自动化专业教学指导分委员会主办，飞思卡尔半导体公司协办，首届比赛由清华大学承办，采用邀请赛方式。
                </p> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 嵌入式开发 -->
    <section class="employee-area section-padding" ref="qrs">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>嵌入式开发</h2>
              <p>Embedded development</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="single-slide d-sm-flex col-sm-6 col-xs-12" style="float: left">
              <div class="slide-img2 qrs1 imgBg">
                <div class="hover-state">
                  <div class="hover-text text-center">
                    <h3>飞思卡尔智能车</h3>
                  </div>
                </div>
              </div>
              <div class="slide-text align-self-center">
                <i class="fa fa-quote-left"></i>
                <p>
                  "飞思卡尔"杯全国大学生智能车赛由高等学校自动化专业教学指导分委员会主办，飞思卡尔半导体公司协办，首届比赛由清华大学承办，采用邀请赛方式。
                </p>
              </div>
            </div>
            <div class="single-slide d-sm-flex col-sm-6" style="float: left">
              <div class="slide-img2 qrs2 imgBg">
                <div class="hover-state">
                  <div class="hover-text text-center">
                    <h3>四轴飞行器</h3>
                  </div>
                </div>
              </div>
              <div class="slide-text align-self-center">
                <i class="fa fa-quote-left"></i>
                <p>
                  四轴飞行器的四个螺旋桨都是电机直连的简单机构，十字形的布局允许飞行器通过改变电机转速获得旋转机身的力，从而调整自身姿态。
                </p>
              </div>
            </div>
            <div class="single-slide d-sm-flex col-sm-12" style="float: left">
              <!-- <div class="slide-img2 qrs2 imgBg">
                <div class="hover-state">
                  <div class="hover-text text-center">
                    <h3>平衡车</h3>
                  </div>
                </div>
              </div> -->
              <div class="col-lg-12" >
              <div class="col-lg-12 col-sm-12 mt-4">
                <h3 slot="reference" class="bookTitle">平衡车</h3>
                <div class="single-team mb-5 mb-sm-0">
                  <div class="team-footer text-center">
                    <video controls>
                      <source :src="imgBaseUrl + '/blance-car_2.mp4'" />
                  </video>
                  </div>
                </div>
              </div>
              <div class="col-lg-12 col-sm-12 mt-4">
                <h3 slot="reference" class="bookTitle">光立方矩阵</h3>
                <div class="single-team mb-5 mb-sm-0">
                  <div class="team-footer text-center">
                    <video controls>
                      <source :src="imgBaseUrl + '/light-cube_2.mp4'" />
                  </video>
                  </div>
                </div>
              </div>
            </div>
              <!-- <div class="slide-text align-self-center">
                <i class="fa fa-quote-left"></i>
                <p>
                  平衡车跟随测试。
                </p>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <el-divider></el-divider>
    <!-- 后端开发 -->
    <section class="employee-area section-padding" ref="back-end">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>后端开发</h2>
              <p>Back end development</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="single-slide d-sm-flex col-sm-12 col-xs-12 col-lg-12 mb-5" style="float: left">
              <div class="slide-img back-end01 imgBg">
                <div class="hover-state">
                  <div class="hover-text text-center">
                    <h3>进销存系统</h3>
                  </div>
                </div>
              </div>
              <div class="slide-text align-self-center">
                <i class="fa fa-quote-left"></i>
                <p>
                  进销存系统基于SpringBoot框架进行开发，立志为中小企业提供开源好用的ERP软件，目前专注进销存+财务+生产功能。主要模块有采购管理、销售管理、仓库管理、财务管理、报表查询、系统管理等。支持预付款、收入支出、订单等特色功能。拥有库存状况、出入库统计等报表
                </p>
              </div>
            </div>
          </div>
          <!-- <div class="row">
            <div class="col-lg-12">
              <div class="col-lg-12 col-sm-12">
                <h3 slot="reference" class="bookTitle">爱购购物商城</h3>
                <div class="single-team mb-5 mb-sm-0">
                  <div class="team-footer text-center mt-4">
                    <video controls>
                      <source :src="imgBaseUrl + '/back-end02.mp4'" />
                    </video>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </section>
    <el-divider></el-divider>
    <!-- 前端开发 -->
    <section id="blog" class="news-area section-padding3" ref="web">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>Web 开发</h2>
              <p>Web development</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 col-md-6">
            <div class="single-news mb-5 mb-lg-0">
              <el-popover placement="top-start" title="图书管理系统" width="200" trigger="hover"
                content="前台采用vue+element-ui，后台使用nodejs+mysql等技术。系统分为普通用户界面和管理员界面">
                <h3 slot="reference" class="bookTitle">图书管理系统</h3>
              </el-popover>
              <div class="news-img news-img1"></div>
              <div class="news-tag">
                <ul class="my-4">
                  <li>
                    <h5><i class="fa fa-calendar-o"></i> 24th June, 2022</h5>
                  </li>
                  <li class="separator mx-2"><span></span></li>
                  <li>
                    <h5><i class="fa fa-folder-open-o"></i> 用户系统</h5>
                  </li>
                </ul>
              </div>
              <div class="news-img news-img2"></div>
              <div class="news-tag">
                <ul class="my-4">
                  <li>
                    <h5><i class="fa fa-calendar-o"></i> 24th June, 2022</h5>
                  </li>
                  <li class="separator mx-2"><span></span></li>
                  <li>
                    <h5><i class="fa fa-folder-open-o"></i> 管理员系统</h5>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 col-md-6">
            <div class="single-news mb-5 mb-lg-0">
              <el-popover placement="top-start" title="仿APEX官网" width="200" trigger="hover"
                content="采用vue+element-ui搭建,并使用了axios、swiper等插件">
                <h3 slot="reference" class="bookTitle">仿APEX官网</h3>
              </el-popover>
              <video controls>
                      <source :src="imgBaseUrl + '/apex_2.mp4'" />
                    </video>
              <div class="news-tag">
                <ul class="my-4">
                  <li>
                    <h5><i class="fa fa-calendar-o"></i> 24th June, 2022</h5>
                  </li>
                  <li class="separator mx-2"><span></span></li>
                  <li>
                    <h5><i class="fa fa-folder-open-o"></i> 仿APEX官网</h5>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <el-divider></el-divider>
    <!-- APP开发 -->
    <section class="employee-area section-padding" ref="app">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>APP开发</h2>
              <p>App development</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div>
              <div class="single-slide d-sm-flex col-sm-6" style="float: left">
                <div class="slide-img app1 imgBg">
                  <div class="hover-state">
                    <div class="hover-text text-center">
                      <h3>恋练 考研英语</h3>
                    </div>
                  </div>
                </div>
                <div class="slide-text align-self-center">
                  <i class="fa fa-quote-left"></i>
                  <p>
                    配套软件，词汇识记与应用大全，课程同步练习，助你考研拿高分。包括卡片学习、识记检测、词汇评选、实战演练
                  </p>
                </div>
              </div>
              <div class="single-slide d-sm-flex col-sm-6" style="float: left">
                <div class="slide-img app2 imgBg">
                  <div class="hover-state">
                    <div class="hover-text text-center">
                      <h3>CashTimer</h3>
                    </div>
                  </div>
                </div>
                <div class="slide-text align-self-center">
                  <i class="fa fa-quote-left"></i>
                  <p>
                    这是一个对用户新建的任务进行计时的微信小程序，每计时1秒，后台对用户的积分+1直至用户手动结束。如果任务结束用户还未停止，则之后每秒积分翻倍
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- News Area End -->

    <!-- Download Area Starts -->
    <section class="download-area section-padding">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6">
            <div class="download-text">
              <h2>Join us</h2>
              <p class="py-3">
                欢迎大家踊跃加入我们，我们将用热情欢迎你们的到来，智能控制实验室欢迎你们！
              </p>
              <div class="download-button d-sm-flex flex-row justify-content-start">
                <el-button @click="toContact()" type="warning" icon="el-icon-bottom" plain round>Now</el-button>
              </div>
            </div>
          </div>
          <div class="col-lg-6 pr-0">
            <div class="download-img"></div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import {picBaseUrl} from '@/utils/const'

const appMap = {
  0: 'wrap',
  1: 'qrs',
  2: 'back-end',
  3: 'web',
  4: 'app'
}
export default {
  data () {
    return {
      imgBaseUrl: picBaseUrl + '/news/img'
    }
  },
  methods: {
    toResult (num) {
      this.$refs[appMap[num]].scrollIntoView(true)
    },
    toContact () {
      this.$bus.$emit('toContact')
    }
  }
}
</script>
<style>
body {
  height: 100%;
  overflow-x: hidden;
}

video {
  max-width: 100%;
  height: auto;
}
</style>

